<template>
  <!-- 弹窗区域 -->
  <el-dialog title="选择我的兴趣技能" width="900px">
    <el-input
        class="search"
        placeholder="搜索兴趣技能"
        v-model="searchInput"
        @blur="change"
    />
    <el-button
        class="search-btn"
        type="primary"
        @click="search"
        :disabled="searchInput? false :true"
    >搜索</el-button>
    <el-form label-position="left" label-width="auto" class="mt-60">
      <el-tag
          class="tag"
          closable
          :disable-transitions="false"
          v-for="item in hobby"
          :key="item.id"
          @click="deleteHandler(item.id)">
          {{item}}
      </el-tag>
    </el-form>
    <div class="text">推荐兴趣技能
      <span class="span">&nbsp;&nbsp;&nbsp;( {{hobby.length}}/7 )</span>
    </div>
    <el-form >
      <div class="hobbylist" v-loading="loading" element-loading-text="加载中">
            <el-checkbox-group  :max="7" v-model="hobby" >
              <el-scrollbar height="200px" @scroll="scrollBottom">
                <el-checkbox
                    :checked="locaHobby.includes(item.name)"
                    size="large"
                    class="checkbox"
                    v-for="item in hobbyList"
                    :key="item.id"
                    border :label="item.name"
                    @click="addHandler"
                />
              </el-scrollbar>
            </el-checkbox-group>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button  size="large" @click="cancel">取消</el-button>
        <el-button @click="save" type="primary" size="large" color="#f93684">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
  name:"PopUp",
})
</script>

<script setup lang="ts">
import {defineEmits, onMounted, ref} from "vue";
import {reqHobby} from "@/api/hobby";
import {useRoute, useRouter} from "vue-router";
import {
  reqGetNewcomerAsync,
  reqGetNewestAsync,
  reqGetPopTrainingAsync,
  reqGetVideoAsync,
  reqGetWorksAsync
} from "@/api/home";
// 选中的兴趣
const hobby =ref<any>([])
// 兴趣列表
const hobbyList =ref<any>([])
// 保存搜索参数
const searchInput = ref<any>("")
// 获取路由表信息
const router = useRouter()
const route = useRoute()
// 父子传参
const emits = defineEmits<{
  (e:'isShow'):any
}>()
// 删除兴趣
const deleteHandler = (e:any) =>{
  hobby.value.splice(hobby.value.indexOf (e),1)
}
// 添加兴趣
const addHandler = (e:any) =>{
  // 是否包含?
  if (e.target.value && hobby.value.includes(e.target.value)){
    // 点击删除包含的
    hobby.value.splice(hobby.value.indexOf(e.target.value),1)
    return
  }
  // 如果不包含，则添加
  if (e.target.value && !hobby.value.includes(e.target.value)){
    hobby.value.push(e.target.value)
  }
}
// 当前页
const pageNum = ref(0)
//获取兴趣列表
const getHobby = async ()=>{
  try {
    loading.value = true
    const res = await reqHobby(pageNum.value);
    hobbyList.value = res.data.content
    setTimeout(()=>{
      loading.value = false
    },100)
  }catch (e) {
    return Promise.reject(e)
  }
}
// 搜索
const search = ()=>{
    hobbyList.value = hobbyList.value.filter((item:any) =>item.name.includes(searchInput.value))
}
const change = ()=>{
  if (searchInput.value?.trim()===""){
    getHobby()
  }
}
//初始化请求
onMounted(()=>{
  getHobby()
})
// 点击确定提交
const save = ()=>{
  localStorage.setItem('interest',JSON.stringify(hobby.value))
  // 重新跳转路由
  router.push(route.name as string)
  // 想强制刷新页面
  router.go(0)
  // 关闭弹窗
  emits('isShow')
}
// 点击取消
const cancel = async ()=>{
  pageNum.value = 0
  const res = await reqHobby(pageNum.value);
  hobbyList.value = res.data.content
  // 关闭弹窗
  emits('isShow')
}

const locaHobby = ref(JSON.parse(localStorage.getItem('interest') as string))

const loading = ref(false)

// 无线下拉事件函数
const scrollBottom = async (e:any)=>{
  console.log('下拉中')
  const num = pageNum.value
  if (e.scrollTop > 49*(num+1)){
    console.log('到底啦')
    pageNum.value = pageNum.value +1
    const res = await reqHobby(pageNum.value);
    hobbyList.value = [...hobbyList.value,... res.data.content]
  }
}
</script>

<style lang="scss" scoped>

.search {
  width: 300px;
  height: 40px;
  position: absolute;
  left: 30px;
  border-radius: 4px;
}
.search-btn {
  width: 70px;
  height: 40px;
  position: absolute;
  left: 340px;
}
.tag {
  width: 100px;
  height: 40px;
  text-align: center;
  margin-left: 10px;
  font-size: 15px;
  color: black;
  background-color: #fff;
  border: solid 0.5px #eee;
}
.mt-60 {
  margin-top: 60px;
  text-align: left;
}
.text {
  text-align: left;
  font-size: 16px;
  margin-top: 20px;
  color: black;
}
.span {
  color: #aaa;
}

.hobbylist {
  text-align: left;
  margin-top: 15px;
  margin-left: 10px;
}
.checkbox {
  width: 110px;
  margin-top: 10px;
}
</style>
